<!--
 * @Description: 我的收藏页面组件
 * @Author: hai-27
 * @Date: 2020-02-20 17:22:56
 * @LastEditors: hai-27
 * @LastEditTime: 2020-03-12 19:34:00
 -->
<template>
  <div class="collect">
    <!-- Add a static page for my favorite module -->
    <div class="collect-header">
      <div class="collect-title">
        <i
          class="el-icon-collection-tag"
          style="color: #ff6700;"
        ></i>
        软件上传
      </div>
    </div>
    <div class="content">
      <el-form
        :model="ruleForm"
        :rules="rules"
        ref="ruleForm"
        label-width="140px"
        class="demo-ruleForm"
      >

        <el-form-item
          label="联系人身份证"
          prop="cardId"
        >
          <el-input v-model="ruleForm.cardId"></el-input>
        </el-form-item>
        <el-form-item
          label="公司数字签名串"
          prop="companyCode"
        >
          <el-input v-model="ruleForm.companyCode"></el-input>
        </el-form-item>
        <el-form-item
          label="公司介绍"
          prop="companyInfo"
        >
          <el-input v-model="ruleForm.companyInfo"></el-input>
        </el-form-item>
        <el-form-item
          label="公司名称"
          prop="companyName"
        >
          <el-input v-model="ruleForm.companyName"></el-input>
        </el-form-item>
        <el-form-item
          label="公司电话"
          prop="companyPhone"
        >
          <el-input v-model="ruleForm.companyPhone"></el-input>
        </el-form-item>
        <el-form-item
          label="联系人"
          prop="name"
        >
          <el-input v-model="ruleForm.name"></el-input>
        </el-form-item>
        <el-form-item
          label="联系人QQ"
          prop="qq"
        >
          <el-input v-model="ruleForm.qq"></el-input>
        </el-form-item>
        <el-form-item
          label="官网软件介绍页面"
          prop="softwareInfoUrl"
        >
          <el-input v-model="ruleForm.softwareInfoUrl"></el-input>
        </el-form-item>
        <el-form-item
          label="软件名称"
          prop="softwareName"
        >
          <el-input v-model="ruleForm.softwareName"></el-input>
        </el-form-item>
        <el-form-item
          label="官网网址"
          prop="websiteUrl"
        >
          <el-input v-model="ruleForm.websiteUrl"></el-input>
        </el-form-item>
        <el-form-item
          label="营业执照"
          prop="name"
        >
          <el-upload
            class="upload-demo"
            action="http://localhost:9527/admin/image/AliYunImgUpload"
            :on-preview="handlePreview"
            :on-remove="handleRemove"
            :before-remove="beforeRemove"
            multiple
            :limit="3"
            :on-exceed="handleExceed"
            :file-list="fileList"
          >
            <el-button
              size="small"
              type="primary"
            >点击上传</el-button>
          </el-upload>
        </el-form-item>
        <el-form-item>
          <el-button
            type="primary"
            @click="submitForm('ruleForm')"
          >提交</el-button>
          <el-button @click="resetForm('ruleForm')">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>
<script>
import { api } from "../api";
export default {
  data() {
    return {
      collectList: [],
      ruleForm: {
        name: "",
        cardId: "",
        companyCode: "",
        companyInfo: "",
        companyName: "",
        qq: "",
        companyPhone: "",
        softwareInfoUrl: "",
        websiteUrl: "",
        softwareName: "",
      },
      fileList: [],
      rules: {
        name: [
          { required: true, message: "请输入联系人身份证", trigger: "blur" },
        ],
        cardId: [
          { required: true, message: "请输入联系人身份证", trigger: "blur" },
        ],
        companyCode: [
          { required: true, message: "请输入公司数字签名串", trigger: "blur" },
        ],
        companyInfo: [
          { required: true, message: "请输入公司介绍", trigger: "blur" },
        ],
        companyName: [
          { required: true, message: "请输入公司名称", trigger: "blur" },
        ],
        companyPhone: [
          { required: true, message: "请输入公司电话", trigger: "blur" },
        ],
        qq: [{ required: true, message: "请输入qq", trigger: "blur" }],
        softwareInfoUrl: [
          {
            required: true,
            message: "请输入官网软件介绍页面",
            trigger: "blur",
          },
        ],
        websiteUrl: [
          { required: true, message: "请输入官网网址", trigger: "blur" },
        ],
        softwareName: [
          { required: true, message: "请输入软件名称", trigger: "blur" },
        ],
      },
    };
  },
  methods: {
    handleRemove(file, fileList) {
      console.log(file, fileList);
      console.log(fileList);
    },
    handlePreview(file) {
      console.log(file);
    },
    handleExceed(files, fileList) {
      console.log(fileList);
      this.$message.warning(
        `当前限制选择 3 个文件，本次选择了 ${files.length} 个文件，共选择了 ${
          files.length + fileList.length
        } 个文件`
      );
    },
    beforeRemove(file, fileList) {
      console.log(fileList);
      return this.$confirm(`确定移除 ${file.name}？`);
    },
    submitForm() {
      this.$refs.ruleForm.validate((valid) => {
        if (valid) {
          this.$axios
            .post(api.addApply, this.ruleForm)
            .then((res) => {
              console.log(res);
              this.ruleForm = {
                name: "",
                cardId: "",
                companyCode: "",
                companyInfo: "",
                companyName: "",
                qq: "",
                companyPhone: "",
                softwareInfoUrl: "",
                websiteUrl: "",
                softwareName: "",
              };
              this.notifySucceed("成功");
            })
            .catch((err) => {
              return Promise.reject(err);
            });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    resetForm() {
      this.$refs.ruleForm.resetFields();
    },
  },
  activated() {
    // 获取收藏数据
    // this.$axios
    //   .post("/api/user/collect/getCollect", {
    //     user_id: this.$store.getters.getUser.user_id
    //   })
    //   .then(res => {
    //     if (res.data.code === "001") {
    //       this.collectList = res.data.collectList;
    //     }
    //   })
    //   .catch(err => {
    //     return Promise.reject(err);
    //   });
  },
};
</script>
<style>
.collect {
  background-color: #f5f5f5;
}
.collect .collect-header {
  height: 64px;
  background-color: #fff;
  border-bottom: 2px solid #ff6700;
}
.collect .collect-header .collect-title {
  width: 1225px;
  margin: 0 auto;
  height: 64px;
  line-height: 58px;
  font-size: 28px;
}
.collect .content {
  padding: 20px 0;
  width: 1225px;
  margin: 0 auto;
}
.collect .content .goods-list {
  margin-left: -13.7px;
  overflow: hidden;
}
/* 收藏列表为空的时候显示的内容CSS */
.collect .collect-empty {
  width: 1225px;
  margin: 0 auto;
}
.collect .collect-empty .empty {
  height: 300px;
  padding: 0 0 130px 558px;
  margin: 65px 0 0;
  background: url(../assets/imgs/cart-empty.png) no-repeat 124px 0;
  color: #b0b0b0;
  overflow: hidden;
}
.collect .collect-empty .empty h2 {
  margin: 70px 0 15px;
  font-size: 36px;
}
.collect .collect-empty .empty p {
  margin: 0 0 20px;
  font-size: 20px;
}
/* 收藏列表为空的时候显示的内容CSS END */
</style>